<template>
  <div class="custom-menu-container">
    <div class="custom-menu-bar" style="color: var( --color-text);">
      <div v-for="item in menuListRight" :key="item.key" class="custom-menu-item"
        :class="{ selected: current === item.key }" @click="handleItemClick(item)"
        :style="{ color: current === item.key ? 'var(--color-Sel)' : 'inherit' }">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '@/store'
const { themeStore } = useStore()
const props = defineProps({
  current: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(['itemClick']);

const router = useRouter();

const menuListRight = ref([
  { key: 'Recommended', label: '推荐' },
  { key: 'follow', label: '关注' }
]);

const handleItemClick = (item) => {
  if (item.key == 'follow') {
    if (getToken() != '') {
      emits('itemClick', item.key);
      router.push(`/Recommended/${item.key}`);
      themeStore.searcShow.txet = '';
      themeStore.searcShow.visible = !themeStore.searcShow.visible
    } else {

        message.warning('请先登录！')
        return
   
    }


  } else {
    emits('itemClick', item.key);
    router.push(`/Recommended/${item.key}`);
    themeStore.searcShow.txet = '';
    themeStore.searcShow.visible = !themeStore.searcShow.visible
  }

};
</script>

<style scoped>
.custom-menu-container {

  overflow: hidden;
}

.custom-menu-bar {
  display: flex;
  white-space: nowrap;
  padding: 0 0.8vw;
  background-color: transparent;
}

.custom-menu-item {
  padding: 0 1vw;
  height: 2.08vw;
  line-height: 2.08vw;
  cursor: pointer;
  font-size: 0.83vw;
  position: relative;
  flex-shrink: 0;


  text-align: center;

}
</style>